<template>
  <div v-if="refresh">
    <el-table v-bind="props" :data="dataList" @selection-change="handleSelectionChange" @sort-change="handelSelectionChange" ref="higTabRef">
      <template v-for="column in columns">
        <template v-if="column.visible">
          <el-table-column v-if="column.custom" v-bind="column" :key="column.prop">
            <template v-slot="scope">
              <slot :name="column.id" v-bind="scope"></slot>
            </template>
            <template #header v-if="column.cuHeader">
              <slot :name="column.id+'Header'">
              </slot>
            </template>
          </el-table-column>
          <el-table-column v-else v-bind="column" :key="column.name" :sortable="column.sortable">
          </el-table-column>
        </template>
      </template>
    </el-table>
    <pagination
        v-show="total>0 && isPagination"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script setup name="HighTable">
import {nextTick, ref, watch, withDefaults} from "vue";
import {ElTable} from "element-plus";
const {proxy} = getCurrentInstance();
const refresh = ref(true)
const emit = defineEmits(['selection-change','sort-change'])
const props = defineProps({
  ...ElTable.props,
  urlApi: Object,
  emptyText: {
    type: String,
    default: "暂无数据",
  },
  columns: Array,
  isPagination: {
    type: Boolean,
    default: true,
  },
})

const dataList = ref([]) // 表格数据

const total = ref(0)

const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
})

// const props =  withDefaults(defineProps({
//   ...ElTable.props,
//   columns: Array
// }), {
// })
// 检测列变更时刷新列
watch(() => props.columns, function (newColumns) {
  refresh.value = false
  nextTick(() => {
    refresh.value = true
  })
}, {deep: true})

function handleSelectionChange(selection) {
  emit('selection-change', selection)
}
function handelSelectionChange(obj){
  emit('sort-change', obj)
}
function doLayout(){
  proxy.$refs['higTabRef'].doLayout()
}
function getList(){
  console.log(props.urlApi)
  if(!props.urlApi){
    console.warn('无效接口地址')
    return;
  }
  props.urlApi(queryParams).then(res=>{
    dataList.value = res || [];
    total.value = dataList.value.length
  })
  // getInfoApi
}
defineExpose({doLayout,getList})
</script>

<style scoped>

</style>
